<template>
	<view class="container">
		<u-form ref="uForm" label-position="left" label-width="auto" :model="formData" :rules="rules" :errorType="['message']">
			<view class="form-wrapper">
				<u-form-item label="姓名" prop="username">
					<u-input type="text" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.username"></u-input>
				</u-form-item>
				<u-form-item label="性别" prop="gender_text" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.gender_text" :disabled="true" @click="sexShow=true"></u-input>
				</u-form-item>
				<u-form-item label="年龄" prop="age">
					<u-input type="number" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.age"></u-input>
				</u-form-item>
				<u-form-item label="手机" prop="mobile">
					<u-input type="number" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.mobile"></u-input>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.birthday" :disabled="true" @click="birthShow=true"></u-input>
				</u-form-item>
				<u-form-item label="入会日期" prop="join_vip_time" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}" :border-bottom="false">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.join_vip_time" :disabled="true" @click="joinShow=true"></u-input>
				</u-form-item>
				<u-form-item label="证件类型" prop="identify_type" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}" :border-bottom="false">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.identify_type_text" :disabled="true" @click="typeShow=true"></u-input>
				</u-form-item>
				<u-form-item label="证件号码" prop="identify">
					<u-input type="text" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.identify"></u-input>
				</u-form-item>
				<u-form-item label="地区" prop="region" right-icon="arrow-right" :right-icon-style="{color:'#D7D7D7',fontSize:'24rpx'}" :border-bottom="false">
					<u-input type="select" placeholder="请选择" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.region" :disabled="true" @click="regionShow=true"></u-input>
				</u-form-item>
				<u-form-item label="地址" prop="address">
					<u-input type="text" placeholder="请输入" :placeholder-style="{color: '#999999'}" :clearable="false" v-model="formData.address"></u-input>
				</u-form-item>
			</view>
		</u-form>
		<view class="order-footer">
			<view class="order-footer__btn">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true" @click="submit">保存</u-button>
			</view>
		</view>
		
		<!-- 选择性别 -->
		<u-action-sheet v-model="sexShow" :list="sexList" @click="sexConfirm"></u-action-sheet>
		<!-- 选择生日 -->
		<u-calendar mode="date" toolTip="请选择生日" v-model="birthShow" @change="birthChange"></u-calendar>
		<!-- 选择入会日期 -->
		<u-calendar mode="date" toolTip="请选择入会日期" v-model="joinShow" @change="joinChange"></u-calendar>
		<!-- 选择证据类型 -->
		<u-select mode="single-column" title="请选择证据类型" v-model="typeShow" :list="typeList" @confirm="typeConfirm"></u-select>
		<!-- 选择地区 -->
		<u-picker mode="region" title="请选择地区" v-model="regionShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					username: '',
					gender_text: '',
					gender:0,
					age: '',
					mobile: '',
					birthday: '',
					join_vip_time: '',
					identify_type: '',
					identify_type_text:'',
					identify: 0,
					region: '',
					address: '',
				},
				rules: {
					name: [{ required: true, trigger: ['change','blur'], message: '请填写姓名' }],
					mobile: [{ required: true, trigger: ['change','blur'], message: '请填写手机号码' }],
					gender_text: [{ required: true, trigger: 'change', message: '请选择性别' }],
					birthday: [{ required: true, trigger: 'change', message: '请选生日' }],
					join_vip_time: [{ required: true, trigger: 'change', message: '请选择入会日期' }],
				},
				sexShow: false,
				sexList: [
					{ value: 0, text: '女' },
					{ value: 1, text: '男' },
				],
				birthShow: false,
				joinShow: false,
				typeShow: false,
				typeList: [
					{ value: 1, label: '身份证' },
				
				],
				regionShow: false,
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options){
			if(options.user_id){
				this.user_id=options.user_id;
				this.getDetail();
			}
		},
		methods: {
			getDetail(){
				var that = this;
				var user_id = that.user_id;
				that.$core.post({url:'fitness.manage/user_detail',data:{user_id: user_id},success:(ret)=>{
					that.formData.username =  ret.data.username;
					that.formData.gender = ret.data.gender;
					that.formData.gender_text = ret.data.gender == 0?'女':'男';
					that.formData.age = ret.data.user_info?ret.data.user_info.age : '';
					that.formData.mobile = ret.data.mobile;
					that.formData.birthday = ret.data.birthday?ret.data.birthday:'';
					that.formData.join_vip_time = ret.data.user_info?ret.data.user_info.join_vip_time_text : '';
					that.formData.identify_type = ret.data.user_info?ret.data.user_info.identify_type : '';
					that.formData.identify_type_text = ret.data.user_info&&ret.data.user_info.identify_type==1?'身份证' :'';
					that.formData.identify = ret.data.user_info?ret.data.user_info.identify: '';
					that.formData.region = ret.data.user_info?ret.data.user_info.region : '';
					that.formData.address = ret.data.user_info?ret.data.user_info.address : '';
				}});
			},
			
			// 请选择课程类型
			sexConfirm(index) {
				this.formData.gender_text = this.sexList[index].text;
				this.formData.gender = this.sexList[index].value;
			},
			// 请选择生日
			birthChange(e) {
				this.formData.birthday = e.result
			},
			// 请选择入会日期
			joinChange(e) {
				this.formData.join_vip_time = e.result
			},
			// 请选择证件类型
			typeConfirm(e) {
				this.formData.identify_type_text = e[0].label;
				this.formData.identify_type = e[0].value;
			},
			// 请选择地区
			regionConfirm(e) {
				this.formData.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			},
			submit() {
				var that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						var formData = that.formData;
						formData['user_id'] = that.user_id;
						that.$core.post({url:'fitness.manage/edit_user',data:formData,success:(ret)=>{
							uni.showToast({
								title:ret.msg,
								success() {
									uni.navigateBack({})
								}
							})
						}});
					} else {
						console.log('验证失败');
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 1rpx 0;
		background: #F6F6F6;
	}
	.form-avatar {
		margin: 32rpx;
		.upload {
			display: block;
			margin: 0 auto;
			width: 128rpx;
			height: 128rpx;
		}
		.icon {
			display: block;
			width: 128rpx;
			height: 128rpx;
			background: #EDEDED;
			border-radius: 50%;
		}
		text {
			display: block;
			margin-top: 18rpx;
			text-align: center;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #999999;
		}
	}
	.form-wrapper {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		&__title {
			margin-bottom: 10rpx;
			line-height: 38rpx;
			font-size: 26rpx;
			color: #333333;
		}
		.color {
			display: inline-block;
			vertical-align: middle;
			margin-top: -6rpx;
			width: 100rpx;
			height: 48rpx;
			border-radius: 12rpx;
		}
		/deep/ .u-form-item {
			padding: 10rpx 30rpx;
			font-size: 26rpx;
		}
		/deep/ .u-input__input {
			text-align: right;
			font-size: 26rpx;
		}
		/deep/ .u-input__textarea {
			padding: 15rpx 0;
			text-align: left;
			line-height: 40rpx;
			box-sizing: border-box;
		}
		/deep/ .u-form-item__message {
			text-align: right;
		}
		/deep/ .u-input__right-icon--select {
			display: none;
		}
		/deep/ .u-list-item {
			// background: #FFFFFF;
		}
	}
	.order-footer {
		padding: 70rpx 24rpx;
		.order-footer__btn {
			margin-top: 20rpx;
		}
	}
	.color-wrapper {
		&__title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			padding: 0 20rpx;
		}
		&__body {
			display: flex;
			flex-wrap: wrap;
			max-height: 60vh;
			padding: 10rpx;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			text {
				display: block;
				margin: 10rpx;
				width: 162rpx;
				height: 80rpx;
				border-radius: 24rpx;
				box-sizing: border-box;
				&.active {
					border: 4rpx #6D4BBE solid;
				}
			}
		}
	}
</style>